import './index.scss'
import Tabs from "../../../components/tabs";
import {useEffect, useState} from "react";
import useCountdown from "../../../hooks/useCountdown";
import {getEndDateTimeStamp} from "../../../utils/date";
import CONFIG from "./../config.json"

const {taskTab, hostTask, userTask} = CONFIG

function Task() {
  const [activeTab, setActiveTab] = useState(taskTab[0])
  const [targetDate, setTargetDate] = useState(Date.now)

  const [, {hours, minutes, seconds}] = useCountdown({targetDate})

  const handleTabChange = d => {
    setActiveTab(d)
  }

  const back = () => {
    window.location.href = "/layout/mid-festival"
  }

  useEffect(() => {
    let target = getEndDateTimeStamp()
    setTargetDate(target)
  }, [])

  const data = activeTab.tab === 0 ? hostTask : userTask

  return (
    <div className="task">
      <button className="back" onClick={back}/>
      <header className="header" />

      <Tabs
        activeKey={activeTab.tab}
        data={taskTab}
        onChange={handleTabChange}
        className="tab"
      />

      <div className="container">
        <div className="time">Hitung mundur {`${hours}:${minutes}:${seconds}`}</div>

        <ul className="progress-list">
          {
            data.map((d, index )=> (
              <li key={d.title}>
                <h3 className="title">{d.title}</h3>
                <div className="content">
                  <h4 className="desc">{d.desc}</h4>
                  <progress className="progress" max="100" value="70" />
                  <div className="bonus">
                    {(d.bonus || []).map(item => <p className={`bonus-icon ${item.icon}`}>{item.desc}</p>)}
                  </div>
                  <i className="done" />
                </div>
              </li>
            ))
          }
        </ul>

        <i className="icon left" />
        <i className="icon right" />
      </div>
    </div>
  )
}

export default Task
